<template>
  <view class="main-box">
    <z-paging ref="paging" v-model="data.list" @query="getExtendCodeList" refresher-enabled>
      <view class="c-pd">
        <view class="mb-3" v-for="(item, index) in data.list" :key="index">
          <van-cell-group inset>
            <van-cell use-label-slot>
              <view slot="title" class="font-bold c-text-14">
                {{ item.villageName }}
              </view>
              <view slot="label">
                <view class="px-3">
                  <view class="flex items-center mb-1">
                    <view class="w-20%">服务模板：</view>
                    <view class="w-80% text-align-end">{{ item.serverModelName || '—' }}</view>
                  </view>
                  <view class="flex items-center mb-1">
                    <view class="w-20%">推广模板：</view>
                    <view class="w-80% text-align-end">{{ item.promoteModelName || '—' }}</view>
                  </view>
                  <view class="flex items-center mb-1">
                    <view class="w-20%">推广员：</view>
                    <view class="w-80% text-align-end">{{ item.userName || '—' }}</view>
                  </view>
                </view>
                <view class="mt-1 flex items-center c-black">
                  <view class="w-6%">
                    <i class="i-basil:location-outline w-4 h-4"></i>
                  </view>
                  <view class="w-94%">
                    <text>{{ item.address }}</text>
                  </view>
                </view>
              </view>
            </van-cell>
          </van-cell-group>
        </view>
      </view>
    </z-paging>
    <view class="fixed right-10 c-bg c-pd box-border" @click="addApplyCode" :style="{ bottom: `${store.$state.systemInfo.safeAreaInsets!.bottom}px`, borderRadius: '50%' }">
      <i class="i-ic:baseline-plus bg-white w-10 h-10"></i>
    </view>
  </view>
</template>

<script setup lang="ts">
import UserRequest from '@/request/userRequest';
import { navigate } from '@/utils/navigate';
import { useAppStore } from '@/store';

interface IData {
  pages: {
    pageNo: number;
    pageSize: number;
    totalPage: number;
  };
  list: IUserStack[];
  userId: number;
}

const data = reactive<IData>({
  pages: {
    pageNo: 1,
    pageSize: 20,
    totalPage: 1,
  },
  list: [],
  userId: 0,
});

const store = useAppStore();

const paging = ref();

onLoad((options) => {
  if (!options) return;
  data.userId = options.userId;
});

const getExtendCodeList = (pageNo: number, pageSize: number) => {
  UserRequest.GetExtendCodeList({ pageNo, pageSize, hasLoading: true, userId: data.userId })
    .then((res) => {
      paging.value.complete(res.data.list);
    })
    .catch((err) => {
      paging.value.complete(false);
    });
};

const addApplyCode = () => {
  navigate({ url: '/subcontract/person/promotionUserList/addApplyCode?userId=' + data.userId });
};
</script>

<style lang="scss" scoped>
:deep(.van-panel) {
  border-radius: 16rpx;
}
</style>
